<!doctype html>
<html>
    <head>
        <title>HT for Web 调度手册</title>
        <meta charset="UTF-8">    
        <meta name="viewport" content="user-scalable=yes, width=1024">
        <style type="text/css"> 
            h1, h2, h3, h4, h5, h6, p, blockquote {
                margin: 0;
                padding: 0;
            }
            body {
                font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", Arial, sans-serif;
                font-size: 13px;
                line-height: 18px;
                color: #737373;
                background-color: white; 
                margin: 10px 13px 10px 13px;
            }
            table {
                margin: 10px 0 15px 0;
                border-collapse: collapse;
            }
            td,th {	
                border: 1px solid #ddd;
                padding: 3px 10px;
            }
            th {
                padding: 5px 10px;	
            }
            a {
                color: #0069d6;
            }
            a:hover {
                color: #0050a3;
                text-decoration: none;
            }
            a img {
                border: none;
            }
            p {
                margin-bottom: 9px;
            }
            h1, h2, h3, h4, h5, h6 {
                color: #404040;
                line-height: 36px;
            }
            h1 {
                margin-bottom: 18px;
                font-size: 30px;
            }
            h2 {
                font-size: 24px;
            }
            h3 {
                font-size: 18px;
            }
            h4 {
                font-size: 16px;
            }
            h5 {
                font-size: 14px;
            }
            h6 {
                font-size: 13px;
            }
            hr {
                margin: 0 0 19px;
                border: 0;
                border-bottom: 1px solid #ccc;
            }
            blockquote {
                padding: 13px 13px 21px 15px;
                margin-bottom: 18px;
                font-family:georgia,serif;
                font-style: italic;
            }
            blockquote:before {
                content:"\201C";
                font-size:40px;
                margin-left:-10px;
                font-family:georgia,serif;
                color:#eee;
            }
            blockquote p {
                font-size: 14px;
                font-weight: 300;
                line-height: 18px;
                margin-bottom: 0;
                font-style: italic;
            }
            code, pre {
                font-family: Monaco, Andale Mono, Courier New, monospace;
            }
            code {
                background-color: #fee9cc;
                color: rgba(0, 0, 0, 0.75);
                padding: 1px 3px;
                font-size: 12px;
                -webkit-border-radius: 3px;
                -moz-border-radius: 3px;
                border-radius: 3px;
            }
            pre {
                display: block;
                padding: 14px;
                margin: 0 0 18px;
                line-height: 16px;
                font-size: 11px;
                border: 1px solid #d9d9d9;
                white-space: pre-wrap;
                word-wrap: break-word;
            }
            pre code {
                background-color: #fff;
                color:#737373;
                font-size: 11px;
                padding: 0;
            }
            sup {
                font-size: 0.83em;
                vertical-align: super;
                line-height: 0;
            }
            * {
                -webkit-print-color-adjust: exact;
            }
            @media screen and (min-width: 914px) {
                body {
                    width: 854px;
                    margin:10px auto;
                }
            }
            @media print {
                body,code,pre code,h1,h2,h3,h4,h5,h6 {
                    color: black;
                }
                table, pre {
                    page-break-inside: avoid;
                }
            }                        
            iframe{
                width: 100%;
                border: 1px solid #34495E;
                margin: 0;                
            }            
            .logo{
                vertical-align: middle;
            }

        </style>        
        <script>
            function init() {
                var logoSrc = '',
                    logos = document.querySelectorAll('.logo'),
                    i = 0;
                for (; i < logos.length; i++) {
                    logos[i].src = logoSrc;
                }
                
                var iframes = document.querySelectorAll('iframe'),
                    func = function(){};
                for (i=0; i < iframes.length; i++) {
                    var iframe = iframes[i];
                    
                    // a small hack to make it work on android
                    iframe.ontouchstart = func;
                    
                    var div = document.createElement('div');
                    div.innerHTML = '<a href="' + iframe.src + '" target="_blank">独立运行→</a>';
                    iframe.parentNode.insertBefore(div, iframe);
                }   
            }
        </script>    
    </head>
    <body onload="init();">
        <a href="http://www.hightopo.com"><img class="logo"></a>HT for Web 调度手册
        <hr style="margin: 1px 0 20px 0">
<p>索引</p>

<ul><li><a href="#ref_overview">概述</a></li><li><a href="#ref_schedule">调度</a><ul><li><a href="#ref_addremove">增删调度任务</a>    </li><li><a href="#ref_enabled">启停调度任务</a></li></ul></li></ul>

<hr/>

<div id="ref_overview"></div>

<h2>概述</h2>

<p><code>HT</code>系统可通过<a href="../../core/beginners/ht-beginners-guide.html#ref_animation">入门手册</a>介绍的<code>ht.Default.startAnim</code>函数，
或者<a href="../../plugin/animation/ht-animation-guide.html">动画手册</a>介绍的动画插件扩展包的方式来实现动画效果。
本手册将介绍的<code>DataModel</code>的调度函数功能，则主要用于在指定的时间间隔进行函数回调处理，常用于实现图形的流动和闪烁等动画效果。</p>

<p><iframe src="examples/example_network.html" style="height:400px"></iframe></p>

<blockquote><p>上例需注意：<code>Graph3dView</code>默认关闭虚线功能，如需启用可通过<code>graph3dView.setDashDisabled(false)</code>启动虚线绘制功能，
虚线详见<a href="../../core/shape/ht-shape-guide.html#ref_polyline">形状手册</a>的空间管线章节。</p></blockquote>

<div id="ref_schedule"></div>

<h2>调度</h2>

<p><code>HT</code>中调度进行的流程是，先通过<code>DataModel</code>添加调度任务，<code>DataModel</code>会在调度任务指定的时间间隔到达时，
遍历<code>DataModel</code>所有图元回调调度任务的<code>action</code>函数，可在该函数中对传入的<code>Data</code>图元做相应的属性修改以达到动画效果。</p>

<div id="ref_addremove"></div>

<h2>增删调度任务</h2>

<p><code>DataModel#addScheduleTask(task)</code>添加调度任务，其中<code>task</code>为<code>json</code>对象，可指定如下属性：</p>

<ul><li><code>interval</code>：间隔毫秒数，默认值为<code>10</code></li><li><code>enabled</code>：是否启用开关，默认为<code>true</code></li><li><code>action</code>：间隔动作函数，该函数必须设置</li></ul>

<p><code>DataModel#removeScheduleTask(task)</code>删除调度任务，其中<code>task</code>为以前添加过的调度任务对象。</p>

<p><iframe src="examples/example_addremove.html" style="height:400px"></iframe></p>

<p><code>blinkTask</code>在<code>500</code>毫秒的间隔交替改变<code>screen.color</code>的颜色值，而<code>modelMap[&#39;LCD&#39;].color = { func: &#39;attr@screen.color&#39; };</code>
将<code>mtl</code>材质为<code>LCD</code>的模型颜色绑定了<code>attr@screen.color</code>，因此该调度任务最终使得<code>mac</code>电脑屏幕颜色交替变化实现闪烁效果：</p>

<pre><code>blinkTask = {
    interval: 500,
    action: function(data){
        if(data !== mac){
            return;
        }                
        if(data.a(&#39;screen.color&#39;) === &#39;red&#39;){
            data.a(&#39;screen.color&#39;, undefined);
        }else{
            data.a(&#39;screen.color&#39;, &#39;red&#39;);
        }
    }        
};
dataModel.addScheduleTask(blinkTask); </code></pre>

<p>当<code>dataModel.removeScheduleTask(blinkTask);</code>删除闪烁调度任务时，通过<code>mac.a({ &#39;screen.color&#39;: &#39;red&#39; });</code>恢复屏幕原始色，
避免处于闪烁的暗色阶段时删除调度任务：</p>

<pre><code>checkBox: {
    label: &#39;Enable Blink&#39;,                 
    selected: true,
    onValueChanged: function(){
        if(this.isSelected()){
            dataModel.addScheduleTask(blinkTask);
        }else{
            dataModel.removeScheduleTask(blinkTask);
            mac.a({ &#39;screen.color&#39;: &#39;red&#39; });
        }
    }
}</code></pre>

<p><code>scaleTask</code>在<code>40</code>毫秒的间隔不断改变图元大小，<code>scale.s3</code>保存着原始图元大小，
<code>scale.value</code>保存当前缩放比例，<code>scale.shrink</code>保存当前缩小还是放大状态：</p>

<pre><code>scaleTask = {
    interval: 40,
    action: function(data){   
        if(data !== mac){
            return;
        }
        var shrink = data.a(&#39;scale.shrink&#39;),
            value = data.a(&#39;scale.value&#39;),
            s3 = data.a(&#39;scale.s3&#39;);
        if(shrink){
            value -= 0.02;
            if(value &lt; 0.94){
                value = 0.94;
                data.a(&#39;scale.shrink&#39;, false);
            }                            
        }else{
            value += 0.02;
            if(value &gt; 1.06){
                value = 1.06;
                data.a(&#39;scale.shrink&#39;, true);
            } 
        }
        data.a(&#39;scale.value&#39;, value); 
        data.s3(s3[0]*value, s3[1]*value, s3[2]*value);                                           
    }
};
dataModel.addScheduleTask(scaleTask); </code></pre>

<p><code>rotationTask</code>在<code>50</code>毫秒的间隔不断改变图元旋转方向：</p>

<pre><code>rotationTask = {
    interval: 50,
    action: function(data){
        if(data !== mac){
            return;
        }
        mac.setRotation(mac.getRotation() + Math.PI/20);
    }        
};
dataModel.addScheduleTask(rotationTask);   </code></pre>

<div id="ref_enabled"></div>

<h2>启停调度任务</h2>

<p><code>DataModel#removeScheduleTask(task)</code>删除调度任务可停止该任务外，调度任务的<code>json</code>参数对象上的<code>enabled</code>属性也可控制调度任务的启停，
如果该属性未设置则<code>HT</code>默认会在<code>addScheduleTask</code>时设置为<code>true</code>，用户可通过明确设置为<code>false</code>进行关闭。从上节例子中可知在<code>action</code>的调度处理时，
我们仅对<code>data === mac</code>的图元进行动画，因此其实调度的启停也可通过在<code>action</code>中，根据具体图元的属性信息做更细粒度的开关控制。</p>

<p>综上所述调度任务的启停可通过<code>DataModel#removeScheduleTask</code>，设置任务对象的<code>enabled</code>属性，
以及在<code>action</code>动作做过滤处理这三种方式来实现任务的启停，用户可根据具体场景选择最合适自己项目的设计方式。</p>

<p><iframe src="examples/example_enabled.html" style="height:160px"></iframe></p>    <hr id="contact" style="margin: 20px 0 1px 0">
    <a href="http://www.hightopo.com"><img class="logo"></a>欢迎交流 <a href="mailto:service@hightopo.com">service@hightopo.com</a>
</body>
</html>
